<template>
  <div class="topbar">
    <div class="wrap tobWrap">
      <div class="tobLeft">欢迎来到叩丁狼积分商城</div>
      <ul class="tobRight">
        <li @click="showLoginModel(true)">
          <img class="userImg" :src="userInfo.headImg" alt="" />
          用户名：{{ userInfo.nickName }}
        </li>
        <li @click="showLoginModel(true)">我的积分：{{ userInfo.coin }}</li>
        <li @click="showLoginModel(true)">获取积分</li>
        <li>叩丁狼官网</li>
        <li class="loginBtn" @click="showLoginModel(true)" v-show="isLogined">
          登录
        </li>
        <li class="cart-btn" v-show="!isLogined">
          <img src="../assets/img/cart.png" alt="" />
          <span>购物车</span>
          <strong>{{ cartTotal }}</strong>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { weiXinLoginApi } from "@/request/api";
export default {
  data() {
    return {
      //购物车总数
      // cartTotal: 0,
    };
  },
  methods: {
    ...mapMutations({
      changeIsShowLoginModel: "showModel/changeIsShowLoginModel",
      chanIsLogined: "loginStatus/chanIsLogined",
      initUserInfo: "userInfo/initUserInfo",
    }),
    ...mapActions({
      asyncChangeIsShowToast: "showToast/asyncChangeIsShowToast",
      asyncChangeUserInfo: "userInfo/asyncChangeUserInfo",
    }),
    showLoginModel(val) {
      this.changeIsShowLoginModel(val);
    },
  },
  computed: {
    ...mapState({
      isLogined: (state) => state.loginStatus.isLogined,
      userInfo: (state) => state.userInfo.userInfo,
      cartTotal: (state) => state.userInfo.cartTotal,
    }),
  },
  created() {
    // 手机扫码确认登录后，url 后出现了 code
    // const mycode = this.$route.query;
    // console.log({ mycode }); //获取不到未加载完的动态路由; query 值会获取不到
    // 解决方法：用 $router.onReady() 方法，在加载完路由后回调，获取 query
    this.$router.onReady(async () => {
      //等路由对象初始化完毕后 再获取参数 $router.onReady(callback)
      const mycode2 = this.$route.query.code;
      // console.log({ mycode2 });
      //如果获取到了地址栏中的code，则表示准备进行【扫码登录】
      //向后端发起微信扫码登录请求
      if (mycode2) {
        const weiXinLogin = await weiXinLoginApi({ code: mycode2 });
        console.log({ weiXinLogin });
        if (!weiXinLogin) return;
        //
        if (weiXinLogin.code == 0) {
          // alert("微信扫码登录成功！");
          //扫码登录成功
          //1、提示扫码登录成功
          this.asyncChangeIsShowToast({
            isShow: true,
            tMsg: "微信扫码登录成功！!",
            tType: "success",
          });
          // 2、切换登录按钮为购物车
          this.chanIsLogined(false);
          // 不用关闭模态框，因为扫码登录成功后会 刷新 页面
          // this.showLoginModel(false);
          // 3、存储 token
          localStorage.setItem("x-auth-token", weiXinLogin["x-auth-token"]);
          // 4、借用跳转清除地址栏上的 code
          this.$router.push(this.$route.path);

          // 登录成功后更新用户状态
          this.asyncUpdateUserInfo();
        } else if (weiXinLogin.code == 400) {
          // 处理 code 不对或者失效的 400
          this.asyncChangeIsShowToast({
            isShow: true,
            tMsg: "二维码已经失效，请重新扫码登录!",
            tType: "error",
          });
          this.changeIsShowLoginModel(true);
        } else if (weiXinLogin.code == 407) {
          // 1、微信登录未绑定手机号的 407
          this.asyncChangeIsShowToast({
            isShow: true,
            tMsg: "请使用手机号绑定登录微信!",
            tType: "warning",
          });
          ///2、打开模态框
          this.changeIsShowLoginModel(true);
          ///3、存 uuid 用于 下次微信绑定手机号登录使用
          localStorage.setItem("uuid", weiXinLogin.uuid);
          ///4、利用跳转清除路径上的 code
          this.$router.push(this.$route.path);
        }
      } else {
        // console.log("进入了created的 else代码部分.....");
        this.chanIsLogined(!localStorage.getItem("x-auth-token")); // 把值取反，利用隐式转换，转为布尔值做登录状态的判断
        // 有 token 要发请求，更新用户状态，
        if (localStorage.getItem("x-auth-token")) {
          this.asyncChangeUserInfo();
        } else {
          this.initUserInfo();
        }
      }
    });
  },
  //需求：手动删除token时，切换导航后更新登录状态。（模仿 token 过期）
  // 法一：
  watch: {
    // 监听路由对象,路由一改变，就根据获取的 token 来判断 登录状态
    /* "$route.path": {
       handler(newVal, oldVal) {
        console.log(newVal, oldVal);
        this.chanIsLogined(!localStorage.getItem("x-auth-token")); // 把值取反，利用隐式转换，转为布尔值做登录状态的判断
      },
    }, */
  },
};
</script>

<style lang="less" scoped>
.topbar {
  height: 40px;
  line-height: 40px;
  min-width: 1200px;
  background: #242b39;
  color: #fff;
  font-size: 14px;
  font-weight: 300;
  .tobWrap {
    display: flex;
    justify-content: space-between;
    .tobRight {
      // float: right;  // 浮不上topbar盒子里
      // width: 495px;
      display: flex;
      justify-content: space-between;
      li {
        margin: 0 10px;
        // float: left;
        .userImg {
          width: 26px;
          height: 26px;
          // border: 1px solid #8891A1;
          border-radius: 13px;
          vertical-align: middle; // vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式
          margin-bottom: 3px;
        }
        &.loginBtn {
          width: 124px;
          height: 40px;
          background: #0a328e;
          text-align: center;
        }
        &.cart-btn {
          width: 124px;
          height: 40px;
          background: #0a328e;
          text-align: center;
          img {
            width: 20px;
            height: 19px;
            vertical-align: middle;
          }
          span {
            margin: 0 8px;
          }
          strong {
            width: 22px;
            height: 22px;
            line-height: 22px;
            display: inline-block;
            border-radius: 50%;
            background-color: #fd604d;
          }
        }
      }
    }
  }
}
</style>